開始有特別頁面後，就會想新增導覽列去方便連結。但是又不想將佈局相關的程式碼寫死在 @/app.vue 之中，這樣會讓未來想要不同佈局時、或是現存某些頁面仍想維持單純的顯示時，還要再另外更改。這時候就可以善用 Layout 功能了！

在專案根目錄下新增 layouts 目錄，並且在其底下新增 @/layouts/default.vue。搭配前幾天安裝的 TailwindCSS，調整一些排版：

<template>
  <section class="mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-4xl xl:px-0 xl:text-lg">
    <div class="flex h-screen flex-col justify-between font-sans">
      <TheHeader />
      <main class="mb-auto">
        <slot />
      </main>
      <TheFooter />
    </div>
  </section>
</template>

並在專案根目錄下新增 components 目錄，並且在其底下新增 @/components/TheHeader.vue 與@/components/TheFooter.vue，並編寫預期的內容

<!--TheHeader -->
<template>
  <header class="flex items-center justify-between pt-6 pb-10">
    <div>
      <NuxtLink href="/">
        <div class="flex items-center justify-between">
          <div class="h-6 text-2xl font-semibold sm:block">
            My Digital Garden
          </div>
        </div>
      </NuxtLink>
    </div>
    <div class="flex items-center text-base leading-5">
      <nav class="hidden sm:block">
        <NuxtLink class="p-1 font-medium text-gray-900 sm:p-4" href="/about">About</NuxtLink>
        <NuxtLink class="p-1 font-medium text-gray-900 sm:p-4" href="/articles">Articles</NuxtLink>
      </nav>
    </div>
  </header>
</template>

<!--TheFooter -->
<template>
  <footer class="my-5">
    <div class="flex flex-col items-center">
      <div class="flex space-x-2 text-sm text-gray-500 dark:text-gray-400">
        <div>© 2013 - 2023</div>
        <div>{{ ' • ' }}</div>
        <NuxtLink href="/">My Digital Garden</NuxtLink>
      </div>
      <div class="text-sm text-gray-500 dark:text-gray-400 items-left">
        <div>Ironman</div>
      </div>
    </div>
  </footer>
</template>

最後再到 @/app.vue 為原本的 <NuxtPage /> 外層用 <NuxtLayout /> 包起來即可：

<template>
  <div>
    <NuxtLayout>
      <NuxtPage class="prose" />
    </NuxtLayout>
  </div>
</template>